import { defineComponent, onMounted, computed, ref } from 'vue';
import Prism from 'prismjs';
import 'prismjs/themes/prism-okaidia.css';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
import './Article.scss';

interface Content {
    code: string
    describe: string
}
interface ChildModel {
    title: string,
    describe: string,
    content: Content[]
}
interface ArticleModel {
    title: string,
    hash: string,
    child: ChildModel[]
}
export default defineComponent({
    name: 'Article',
    props: {
        data: {
            type: Array,
            require: true,
            default: []
        }
    },
    setup(props) {
        const currentId = ref('');
        const data = computed(() => {
           return props.data.map(item => {
              item.hash = createHash(6);
              item.child.map((cItem:any) => {
                  cItem.hash = `${item.hash}_${createHash(6)}`;
                  return cItem;
              });
              return item;
           });
        });
        onMounted(() => {
            Prism.highlightAll();
        });
        function createHash (hashLength:number) {
            if (!hashLength || typeof(Number(hashLength)) != 'number') return;
            const ar = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
            const hs = [];
            const hl = Number(hashLength);
            const al = ar.length;
            for (let i = 0; i < hl; i ++) {
                hs.push(ar[Math.floor(Math.random() * al)]);
            }
            return hs.join('');
        }
        function onClickMenu(id:string) {
            currentId.value = id;
            anchorJump(id);
        }
        function anchorJump(id:string) {
            const anchorEle = document.querySelector(`#${id}`);
            if (!!anchorEle) {
                anchorEle.scrollIntoView(true);
            }
        }
        function renderData() {
            return data.value.map((item: any) => {
                return (
                    <div>
                        <h1 id={item.hash}>{item.title}</h1>
                        {item.child.map((child: any) => {
                            let baseTarget:string = '';
                            if (item.id) {
                                baseTarget += item.id + '_'
                            }
                            if (child.id) {
                                baseTarget += child.id + '_'
                            }
                            return (
                                <div>
                                    <h2 id={child.hash}>{child.title}</h2>
                                    <div v-html={child.describe}/>
                                    {child.content.map((con: any) => {
                                        let id = '';
                                        if (con.file_name) {
                                            id = baseTarget + con.file_name.replace(/\./gi, '_');
                                        }
                                        return (
                                            <div class="content">
                                                <div v-html={con.describe}/>
                                                <div class="pre_box">
                                                    <div class="file_name">{con.file_name}</div>
                                                    <div id={id}>
                                                        {con.code && <pre class="line-numbers language-javascript"><code class="language-javascript">{con.code}</code></pre>}
                                                    </div>
                                                </div>
                                                <div v-html={con.describe_after} />
                                            </div>
                                        )
                                    })}
                                </div>
                            )
                        })}
                    </div>
                )
            })
        }

        return () => {
            return (
                <>
                    <div class="article">
                        {renderData()}
                    </div>
                    <div class="menu">
                        {data.value.map((item: any) => (
                            <div class="li">
                                <div class={`title ${currentId.value.includes(item.hash) ? 'selected' : ''}`} onClick={() => onClickMenu(item.hash)}>{item.title}</div>
                                {item.child.map((c: any) => (
                                    <div class={`child_li ${currentId.value === c.hash ? 'child_selected' : ''}`} onClick={() => onClickMenu(c.hash)}>
                                        {c.title}
                                    </div>
                                ))}
                            </div>
                        ))}
                    </div>
                </>
            )
        }
    }
})
